<md-content class="md-padding" ng-controller="TodoController as vm">
    <div layout="row">
        <h4 flex="82">{{vm.remaining()}} of {{vm.todos.length}} remaining</h4>
        <md-button class="md-primary" ng-click="vm.toggleAll()">Toggle All
        </md-button>
    </div>

    <md-checkbox ng-repeat="todo in vm.todos" ng-model="todo.done">
        {{todo.text}}
    </md-checkbox>

    <form ng-submit="vm.addTodo($event)" novalidate name="tasksForm">
        <div layout="row" flex>
            <md-input-container flex ng-class="{'md-input-invalid':tasksForm.taskText.$error.required && tasksForm.$submitted}">
                <label>Write some todo task here...</label>
                <input ng-model="vm.todoText" name="taskText" required>
            </md-input-container>
            <md-button class="md-fab md-wayrn md-mini">
                <i class="material-icons">add</i>
            </md-button>
        </div>
        <md-button class="md-primary" ng-click="vm.archive($event)">
            Remove completed
        </md-button>
    </form>
</md-content>